<template>
  <!-- HOME 1 -->
  <div id="home1" class="container-fluid standard-bg">
    <!-- HEADER -->
    <div class="row header-top">
      <div class="col-lg-2 col-md-3 col-sm-5 col-xs-8 main-logo-box">
        <a class="main-logo" href="/">
          <img src="../../assets/img/main-logo.svg" class="main-logo img-responsive" alt="AkPlayer" title="AkPlayer">
        </a>
      </div>
      <div class="col-lg-10 col-md-9 col-sm-7 col-xs-12 icon-box icon-parent">
        <div class="col-lg-3 hidden-md middle"></div>
        <div id="icon" class="col-lg-1 col-md-2 hidden-sm hidden-xs post middle">
          <a :href="path.avatar" class="icon-box">
            <img :src="user.userIcon" class="img-responsive" id="user-icon" alt="Icon">
          </a>
          <div id="user">
            <div id="logged-in" v-if="isLogged">
              <div id="nickname">{{ user.nickName }}</div>
              <div class="tag">
                <a class="tag-common" :class="{'tag-vip':user.isVip}"><span>{{ user.tag }}</span></a>
              </div>
              <div class="level-box">
                <div class="level-info">
                  <div class="grade col-lg-5">等级 {{ user.level }}</div>
                  <div class="progress-num col-lg-7">{{ user.exp }} / {{ user.totalExp }}</div>
                </div>
                <a href="#">
                  <div class="level-bar">
                    <div class="level-progress" :style="{width: progressBar}"></div>
                  </div>
                </a>
              </div>
              <div class="coin-box">
                <a href="#" class="coin-item col-lg-6" title="硬币">
                  <div class="key fa fa-empire">&nbsp;</div>
                  <div class="value">{{ coinsShow }}</div>
                </a>
                <a href="#" class="coin-item col-lg-6" title="钻石">
                  <div class="key fa fa-diamond">&nbsp;</div>
                  <div class="value">{{ diamondsShow }}</div>
                </a>
              </div>
              <div class="count-box">
                <a href="#" class="count-item col-lg-4">
                  <div class="count-key">关注</div>
                  <div class="count-value">99+</div>
                </a>
                <a href="#" class="count-item col-lg-4">
                  <div class="count-key">粉丝</div>
                  <div class="count-value">99+</div>
                </a>
                <a href="#" class="count-item col-lg-4">
                  <div class="count-key">动态</div>
                  <div class="count-value">99+</div>
                </a>
              </div>
              <div class="button-box">
                <div class="button-item" @click="personalHandle"><span><i class="fa fa-user">个人中心</i></span></div>
                <div class="button-item"><span><i class="fa fa-wrench">创作中心</i></span></div>
              </div>
              <div class="logout-box">
                <div class="logout" @click="logout"><span><i class="fa fa-sign-out">退出登录</i></span></div>
              </div>
            </div>
            <div id="not-logged-in" v-else>
              <p>登录后你可以：</p>
              <div class="danmu"><img src="../../assets/img/danmu.png" alt=""></div>
              <div class="btn-box">
                <button type="button" class="btn btn-default col-xs-5" @click="reg">注册</button>
                <div class="col-xs-2"></div>
                <button type="button" class="btn btn-primary col-xs-5" @click="login">登录</button>
              </div>
            </div>
          </div>
        </div>
        <a class="navbar-toggle" type="button" data-toggle="collapse" href="#js-icon-box">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div class="collapse nav-box" id="js-icon-box">
          <ul class="nav navbar-nav middle nav-li-left">
            <li v-for="item in navs" :key="item.id">
              <a :href="item.href">{{ item.title }} <span v-if="item.id === 1 && false" class="badge pull-right">3</span></a>
            </li>
          </ul>
          <button type="button" class="access-btn middle">投稿</button>
        </div>

      </div>
    </div>

    <!-- MENU -->
    <div class="row home-mega-menu">
      <div class="col-xs-12">
        <nav class="navbar navbar-default">
          <div class="megabg dropshd navbar-collapse collapse js-navbar-collapse">
            <div class="search-block">
<!--              <form @submit.native.prevent>-->
                  <input type="search" placeholder="Search" class="search-input" v-model="searchText" @keypress.enter="search" />
                  <input type="button" class="search-button" @click="search">
<!--              </form>-->
            </div>
            <ul class="nav navbar-nav">
              <li v-for="item in navBars" :key="item.id"><a :href="item.href">{{ item.title }}</a></li>
            </ul>
          </div>
          <!-- /.nav-collapse -->
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import {getInfoApi, logout, navBars, navs} from './header-js'
import {hasAuthorization, toPercent} from '../../js/my-utils'

/**
 * @isLogged 是否登录
 * @userIcon 用户头像地址
 * @nickName 用户昵称
 * @isVip 是否是会员
 * @tag 称号
 * @searchText 搜索内容
 * @navs 顶端导航栏
 * @navBars 主导航栏
 * ../img/thumbs/thumb-review7.jpg
 * */
export default {
  name: 'Header',
  inject: ['reload'],
  data () {
    return {
      isLogged: false,
      user: {
        userIcon: require('../../assets/img/user/akari.jpg'),
        nickName: '逝去的雨2333',
        isVip: true,
        isMedia: false,
        tag: '年度大会员',
        level: 4,
        exp: 8562,
        totalExp: 10800,
        coins: 100.5,
        diamonds: 1000
      },
      path: {
        avatar: '/#/account/avatar'
      },
      searchText: '',
      navs: navs,
      navBars: navBars
    }
  },
  methods: {
    reg () {
      // 注册按钮
      this.$router.push('/reg')
    },
    login () {
      // 登录按钮
      this.$router.push('/login')
    },
    logout () {
      // 退出登录
      logout(this)
    },
    personalHandle () {
      this.$router.push('/account/home')
    },
    search () {
      window.location.href = '/#/search?s=' + this.searchText
    }
  },
  mounted: function () {
    // 检查本地是否存在token
    hasAuthorization(this)
    getInfoApi(this, this.authorization)
  },
  computed: {
    authorization: {
      // token令牌
      get () {
        return this.$store.state.authorization
      },
      set (authorization) {
        this.$store.commit('setToken', authorization)
      }
    },
    progressBar: function () {
      // 进度条显示
      return toPercent(this.user.exp / this.user.totalExp)
    },
    coinsShow: function () {
      return this.user.coins > 9999999 ? '9999999+' : parseInt(this.user.coins)
    },
    diamondsShow: function () {
      return this.user.coins > 9999999 ? '9999999+' : this.user.diamonds
    }
  },
  watch: {
    '$route.path': {
      handler () {
        hasAuthorization(this)
      }
    },
    'authorization': {
      handler (newName) {
        console.log('watch')
        getInfoApi(this, newName)
      }
    }
  }
}
</script>

<style scoped>
.tag-vip {
  background-color: rgb(251, 114, 153);
}
</style>
